<template>
    <d2-container>
        <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getMenuTree">刷新</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="add">添加</el-button>
            <el-button type="primary" icon="el-icon-edit" size="small" :disabled="currentId == 0" @click="edit">编辑
            </el-button>
            <el-button type="primary" icon="el-icon-delete" size="small" :disabled="currentId == 0" @click="del">删除
            </el-button>
            <el-button type="primary" icon="el-icon-aim" :disabled="currentId == 0" size="small" @click="cancel">取消
            </el-button>
            <el-button type="primary" icon="el-icon-edit" size="small" @click="registerBtn" :disabled="currentId == 0">
                自动注册按钮</el-button>
            <el-button type="primary" icon="el-icon-connection" size="small" @click="asyncBtn">
                同步快捷菜单</el-button>
        </el-button-group>
        <el-popover placement="top-start" title="温馨提示" width="400" trigger="hover">
            <li>请不要在`功能`类型节点下建子节点</li>
            <li>`菜单`类型节点的权限标识请设置为其某个`功能`类型子节点的权限标识</li>
            <el-button slot="reference" size="small" icon="el-icon-info" style="float:right">操作提示</el-button>
        </el-popover>
        <el-row :gutter="20">
            <el-col :span="8" style="margin-top:15px;">
                <el-card shadow="hover" v-loading="treeLoading">
                    <el-tree ref="tree" class="filter-tree" node-key="id" highlight-current
                        :expand-on-click-node="false" :data="menuTree" :props="defaultProps" @node-click="getMenuData"
                        :default-expand-all="expandAll" :default-expanded-keys="expandKeys">
                        <span class="custom-tree-node" slot-scope="{ node, data }" render-after-expand>
                            <span>
                                <d2-icon :name="data.icon" style="margin-right:10px;" v-if="data.typeEnum != '/'" />
                                {{ data.label }}
                            </span>
                            <span style="color:#a7a7a7;" v-if="data.typeEnum != '/'">
                                {{data.typeEnum}}
                            </span>
                        </span>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="16" style="margin-top:15px;">
                <el-card shadow="hover">
                    <el-form label-position="right" label-width="80px" :model="menuform" ref="menuform">
                        <el-form-item label="父级节点" prop="parentModuleId"
                            :rules="[{ required: true, message: '父级节点不能为空'}]">
                            <!-- <el-input clearable v-model="menuform.parentModuleId" :disabled="true" placeholder="父级节点"></el-input> -->
                            <tree-select :options="menuTree" v-model="menuform.parentModuleId" :disabled="!formEdit"
                                placeholder="父级节点" :props="treeProps" ref="tree">
                            </tree-select>
                        </el-form-item>
                        <el-form-item label="标题" prop="moduleName" :rules="[{ required: true, message: '标题不能为空'}]">
                            <el-input clearable v-model="menuform.moduleName" :disabled="!formEdit" placeholder="请输入标题"
                                maxlength="20" show-word-limit>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="类型" prop="moduleType" :rules="[{ required: true, message: '类型不能为空'}]">
                            <el-select class="filter-item" v-model="menuform.moduleType" :disabled="!formEdit"
                                placeholder="请选择类型">
                                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="资源路径" prop="modulePath" v-if="menuform.moduleType == 2 "
                            :rules="[{ required: true, message: '路径编码不能为空'}]">
                            <el-input clearable v-model="menuform.modulePath" :disabled="!formEdit"
                                placeholder="请输入路径编码,如果没有文件请设置为空" maxlength="200" show-word-limit>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="编码" prop="moduleValue" v-if="menuform.moduleType != 3"
                            :rules="[{ required: true, message: '编码不能为空'}]">
                            <el-input clearable v-model="menuform.moduleValue" :disabled="!formEdit"
                                placeholder="请输入路径编码" maxlength="20" show-word-limit>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="图标" prop="moduleIcon" v-if="menuform.moduleType != 3"
                            :rules="[{trigger: 'change', required: true, message: '图标不能为空'}]">
                            <d2-icon-select v-model="menuform.moduleIcon" :disabled="!formEdit" :userInput="true" />
                        </el-form-item>
                        <el-form-item label="权限标识" prop="moduleAuthority" v-if=" menuform.moduleType == 3">
                            <el-input clearable v-model="menuform.moduleAuthority" :disabled="!formEdit"
                                placeholder="请输入权限标识" maxlength="60" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="moduleSort" v-if="menuform.moduleType != 3">
                            <el-input-number clearable v-model="menuform.moduleSort" :disabled="!formEdit"
                                controls-position="right" :min="0"></el-input-number>
                        </el-form-item>
                        <el-form-item label="启用">
                            <el-radio-group v-model="menuform.moduleEnable" :disabled="!formEdit">
                                <el-radio-button label="Y">启用</el-radio-button>
                                <el-radio-button label="N">禁用</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="描述" prop="moduleDescription">
                            <el-input clearable v-model="menuform.moduleDescription" :disabled="!formEdit"
                                placeholder="请输入描述信息" maxlength="200" show-word-limit></el-input>
                        </el-form-item>
                        <el-form-item v-if="formEdit">
                            <el-button type="primary" @click="submit">提交</el-button>
                            <el-button @click="reset">清空</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>

        <register-btn v-if="registerBtnDailogVisible" ref="registerBtn" @refreshDataList="getMenuTree"></register-btn>
    </d2-container>
</template>

<script>
    import * as menuService from "@/api/upms/menu";
    import * as userShortcutService from '@/api/upms/usershortcut'
    import registerBtn from './register-btn'
    export default {
        name: "system-menu",
        data() {
            return {
                formEdit: false,
                treeLoading: false,
                expandAll: false,
                currentId: 0,
                menuList: [],
                expandKeys: ['-1'],
                menuTree: [{
                    id: '-1',
                    label: '菜单目录',
                    parentModuleId: '0',
                    typeEnum: '/',
                    icon: '',
                    children: []
                }],
                defaultProps: {
                    children: 'children',
                },
                menuform: {
                    moduleId: "",
                    parentModuleId: "0",
                    moduleName: "",
                    moduleIcon: "",
                    moduleSort: 0,
                    moduleType: '0',
                    modulePath: '',
                    moduleAuthority: '',
                    moduleValue: '',
                    moduleEnable: 'Y',
                    moduleDescription: ''
                },
                typeOptions: [{
                    value: '0',
                    label: "模块"
                }, {
                    value: '1',
                    label: "目录"
                }, {
                    value: '2',
                    label: "菜单"
                }, {
                    value: '3',
                    label: "按钮"
                }],
                treeProps: {
                    parent: 'pid',
                    value: 'id',
                    label: 'label',
                    children: 'children',
                },
                relateInterfaceDialogVisible: false,
                addPermissionDailogVisible: false,
                registerBtnDailogVisible: false,
                showAddPermiss: false,
                // canAdd: this.hasPermissions(["p_menu_edit"]),
                canAdd: true
            };
        },
        components: {
            registerBtn
        },
        created() {
            // this.getMenuList();
            this.getMenuTree();
        },
        methods: {
            getMenuList() {
                this.treeLoading = true;
                menuService.getMenuList().then(data => {
                    this.menuList = data.data;
                    this.treeLoading = false;
                });
            },
            getMenuTree() {
                this.treeLoading = true;
                menuService.getMenuTree().then(data => {
                    if (data) {
                        let keys = []
                        data.forEach(item => {
                            keys.push(item.id)
                        })
                        this.expandKeys = [...keys, ...this.expandKeys]
                        this.menuTree[0].children = data;
                    }
                    this.treeLoading = false;
                });
            },
            getMenuData(data) {
                let code = data.id;
                if (code == '-1') {
                    this.currentId = data.parentModuleId
                    return
                }
                menuService.getMenu(code).then(data => {
                    this.menuform = {
                        moduleId: data.moduleId,
                        parentModuleId: data.parentModuleId,
                        parentModuleName: data.parentModuleName,
                        parentModuleValue: data.parentModuleValue,
                        moduleName: data.moduleName,
                        moduleIcon: data.moduleIcon,
                        perms: data.perms,
                        moduleSort: data.moduleSort,
                        moduleType: data.moduleType,
                        moduleEnable: data.moduleEnable,
                        modulePath: data.modulePath,
                        moduleAuthority: data.moduleAuthority,
                        moduleValue: data.moduleValue,
                        moduleDescription: data.moduleDescription
                    };
                    this.currentId = code;
                });
                // menuService.getPermisList(code).then(data => {
                //     this.permissionList = data.data;
                // });
            },
            add() {
                this.menuform = {
                    moduleId: "",
                    parentModuleId: this.currentId || '0',
                    parentModuleName: "",
                    parentModuleValue: "",
                    moduleName: "",
                    moduleIcon: "",
                    moduleSort: 0,
                    moduleType: '0',
                    moduleEnable: 'Y',
                    modulePath: '',
                    moduleAuthority: '',
                    moduleValue: '',
                    moduleDescription: ''
                };
                this.formEdit = true;
            },
            edit() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                    return
                }
                this.formEdit = true;
            },
            del() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                    return
                }
                this.$confirm("确认删除？", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "删除",
                    cancelButtonText: "取消"
                }).then(() => {
                    menuService.delMenu(this.currentId).then(() => {
                        this.currentId = 0;
                        this.getMenuTree();
                    });
                });
            },
            cancel() {
                this.formEdit = false;
                this.currentId = 0;
                this.getMenuTree();
            },
            submit() {
                if (this.menuform.moduleId) {
                    menuService.updateMenu(this.menuform).then(() => {
                        this.getMenuTree();
                        this.formEdit = false;
                    });
                } else {
                    menuService.saveMenu(this.menuform).then(() => {
                        this.getMenuTree();
                        this.formEdit = false;
                    });
                }


            },
            reset() {
                this.menuform = {
                    moduleId: this.currentId,
                    parentModuleId: this.menuform.parentModuleId || '0',
                    parentModuleName: "",
                    parentModuleValue: "",
                    moduleName: "",
                    moduleIcon: "",
                    moduleSort: 0,
                    moduleType: '0',
                    moduleEnable: 'Y',
                    modulePath: "",
                    moduleAuthority: "",
                    moduleValue: "",
                    moduleDescription: "",
                };
            },
            openInterfaceDialog() {
                this.relateInterfaceDialogVisible = !this.relateInterfaceDialogVisible;
            },
            addPermissionDailogHandler(id) {
                // this.addPermissionDailogVisible = true;
                // this.$nextTick(() => {
                //     this.$refs.addPermissionDailog.init(id);
                // })
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                } else {
                    this.showAddPermiss = true;
                    this.permissionForm.parentModuleId = this.currentId;
                }


            },
            closePermissionDailogHandler() {
                this.showAddPermiss = false;
                this.permissionForm.parentModuleId = 0;
                this.permissionForm.menuId = 0
                this.permissionForm.moduleName = ""
                this.permissionForm.perms = ""
            },
            // 自动注册按钮
            registerBtn() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                    return
                } else {
                    if (this.menuform.moduleType !== '2' && this.menuform.moduleType !== '1') {
                        this.$message.error('请从左侧选择菜单！');
                        return
                    }
                }
                this.registerBtnDailogVisible = true
                this.$nextTick(() => {
                    this.$refs.registerBtn.init(this.currentId)
                })
            },
            // 同步快捷菜单
            asyncBtn() {
                userShortcutService.syncModule().then(res => {
                    // console.log(res)
                    this.$message.success('同步请求发送成功！');
                })
            }

        },

    };
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;
        padding-right: 8px;
    }
</style>